<template>
  <div class="m-menu">
    <dl
      class="nav"
      @mouseleave="mouseleave"
    >
      <dt>全部分类</dt>
      <dd
        v-for="( menu , idx ) in menuList"
        :key="idx"
        @mouseenter="mousseenter"
      >
        <i :class="menu.type"/>{{ menu.name }}<span class="arrow"/>
      </dd>
    </dl>
    <div
      v-if="curdetail"
      class="detail"
      @mouseenter="denter"
      @mouseleave="dleave"
    >
      <template v-for="(item,idx) in curdetail.child">
        <h4 :key="idx">{{ item.title }}</h4>
        <span
          v-for="v in item.child"
          :key="v">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('home')

export default {
  name: 'Menu',
  data() {
    return {
      kind: ''
    }
  },
  computed: {
    ...mapState(['menuList']),
    curdetail() {
      return this.menuList.filter(item => item.type === this.kind)[0]
    }
  },
  methods: {
    mouseleave() {
      this._timer = setTimeout(() => (this.kind = ''), 300)
    },
    mousseenter(e) {
      this.kind = e.target.querySelector('i').className
    },
    denter() {
      clearTimeout(this._timer)
    },
    dleave() {
      this.kind = ''
    }
  }
}
</script>

<style lang="scss">
</style>
